<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>图片验证码 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>图片验证码</h1>
  <time datetime=0001-01-01T00:00:00Z class="post-date">Mon, Jan 1, 0001</time>
  <p><em>图形验证码用于登录、注册等方面，安全性相对较低</em></p>
<p><strong>1、图形验证码首先应该验证码类（django端）</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 定义验证码类</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyCode</span>(View):

    <span style="color:#75715e"># 定义随机颜色</span>
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get_random_color</span>(self):
        R <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        G <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        B <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(<span style="color:#ae81ff">255</span>)
        <span style="color:#66d9ef">return</span> (R, G, B)

    <span style="color:#75715e"># 获取验证码视图</span>
    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self, request):
        <span style="color:#75715e"># 画布</span>
        img_size <span style="color:#f92672">=</span> (<span style="color:#ae81ff">200</span>, <span style="color:#ae81ff">100</span>)
        <span style="color:#75715e"># 定义画图对象</span>
        image <span style="color:#f92672">=</span> Image<span style="color:#f92672">.</span>new(<span style="color:#e6db74">&#39;RGB&#39;</span>, img_size, <span style="color:#e6db74">&#39;white&#39;</span>)
        <span style="color:#75715e"># 定义画笔对象</span>
        draw <span style="color:#f92672">=</span> ImageDraw<span style="color:#f92672">.</span>Draw(image, <span style="color:#e6db74">&#39;RGB&#39;</span>)
        <span style="color:#75715e"># 定义随机字符串</span>
        source <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;hvhsdfjhkbaskjdfbvhkj&#39;</span>
        <span style="color:#75715e"># 容器</span>
        code_str <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>
        <span style="color:#75715e"># 定义字体(本地路径)</span>
        my_font <span style="color:#f92672">=</span> ImageFont<span style="color:#f92672">.</span>truetype(font<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;C:</span><span style="color:#ae81ff">\\</span><span style="color:#e6db74">Windows</span><span style="color:#ae81ff">\\</span><span style="color:#e6db74">Fonts</span><span style="color:#ae81ff">\\</span><span style="color:#e6db74">framdit.ttf&#34;</span>, size<span style="color:#f92672">=</span><span style="color:#ae81ff">50</span>)
        <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">4</span>):
            <span style="color:#75715e"># 获取随机颜色</span>
            text_color <span style="color:#f92672">=</span> self<span style="color:#f92672">.</span>get_random_color()
            <span style="color:#75715e"># 获取随机字符串长度下标</span>
            tmp_num <span style="color:#f92672">=</span> random<span style="color:#f92672">.</span>randrange(len(source))
            <span style="color:#75715e"># 获取字符集</span>
            random_str <span style="color:#f92672">=</span> source[tmp_num]
            <span style="color:#75715e"># 添加到容器中</span>
            code_str <span style="color:#f92672">+=</span> random_str
            <span style="color:#75715e"># 将字符串添加到画布中去</span>
            draw<span style="color:#f92672">.</span>text((<span style="color:#ae81ff">10</span> <span style="color:#f92672">+</span> <span style="color:#ae81ff">30</span> <span style="color:#f92672">*</span> i, <span style="color:#ae81ff">20</span>), random_str, text_color, font<span style="color:#f92672">=</span>my_font)

        <span style="color:#75715e"># 建立缓存区</span>
        buf <span style="color:#f92672">=</span> io<span style="color:#f92672">.</span>BytesIO()

        <span style="color:#75715e"># 将验证码存储到redis中</span>
        r<span style="color:#f92672">.</span>set(<span style="color:#e6db74">&#39;code&#39;</span>, code_str)

        <span style="color:#75715e"># 保存图片</span>
        image<span style="color:#f92672">.</span>save(buf, <span style="color:#e6db74">&#39;png&#39;</span>)
        <span style="color:#66d9ef">return</span> HttpResponse(buf<span style="color:#f92672">.</span>getvalue(), <span style="color:#e6db74">&#39;image/png&#39;</span>)
</code></pre></div><p><strong>2、前端展示验证码</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//data里定义图片验证码地址，template里进行调用
</span><span style="color:#75715e"></span><span style="color:#a6e22e">src</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;http://localhost:8000/code/&#39;</span>,
</code></pre></div><p><strong>3、点击图片刷新验证码</strong></p>
<pre><code>//图片定义click事件
&lt;img :src=&quot;src&quot; @click=&quot;changeimg&quot;&gt;
</code></pre><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//methods中进行逻辑处理
</span><span style="color:#75715e">//刷新验证码
</span><span style="color:#75715e"></span><span style="color:#a6e22e">changeimg</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){

	<span style="color:#75715e">//随机字符串
</span><span style="color:#75715e"></span>	<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">num</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">ceil</span>(Math.<span style="color:#a6e22e">random</span>()<span style="color:#f92672">*</span><span style="color:#ae81ff">10</span>);
	<span style="color:#75715e">//赋值地址
</span><span style="color:#75715e"></span>	<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;?code=&#34;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">num</span>;

},
</code></pre></div><p><strong>4、发送输入的验证码到django端，和存储在redis中的code进行判断比较</strong></p>

</div>


    </main>

    
  </body>
</html>
